﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Title -->
    <title>XK-Blog</title>

    <!-- /favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/assets1/css/bootstrap.min.css">

    <!--矢量图标-->
    <link rel="stylesheet" href="/style/icon/icon.css">

    <!-- Font awesome CSS -->
    <link rel="stylesheet" href="/assets1/css/font-awesome.min.css">

    <!-- Animate CSS -->
    <link rel="stylesheet" href="/assets1/css/animate.min.css">

    <!-- OwlCarousel CSS -->
    <link rel="stylesheet" href="/assets1/css/owl.carousel.css">

    <!-- SlickNav CSS -->
    <link rel="stylesheet" href="/assets1/css/slicknav.min.css">

    <!-- Magnific popup CSS -->
    <link rel="stylesheet" href="/assets1/css/magnific-popup.css">

    <!-- Main CSS -->
    <link rel="stylesheet" href="/assets1/css/style.css">

    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/assets1/css/responsive.css">

</head>
<body>


<!-- Allpost 区域起始 -->
<section class="rapid-Allpost-area section_50">
    <div class="container">
        <div class="row">
            <!--右侧内容 开始-->
            <div class="col-md-3"  th:fragment="blogRight">
                <div class="blog-page-right margin-top">
                    <div class="blog-sidebar-widget">
                        <div class="about-us-widget">
                            <div class="about-widget-image">
                                <a href="#">
                                    <img th:src="${user.avatar}" alt="about image"/>
                                </a>
                            </div>
                            <div class="about-widget-text">
                                <h3 th:text="${user.userName}"></h3>
                                <p th:text="${user.tagline}"></p>
                            </div>
                        </div>
                    </div>
                    <div class="blog-sidebar-widget">
                        <ul class="social_links">
                            <li>
                                <a class="external-link"
                                   href="https://www.douyin.com/user/MS4wLjABAAAA6971BgqCM2UsWrV0Jg1kTba9VwYAAwEsbHKeQ8-ozPA?from_tab_name=main"
                                   target="_blank">
                                    <i class="iconfont icon-douyin1"></i>
                                </a>
                            </li>
                            <li>
                                <a class="external-link"
                                   href="https://m.weibo.cn/u/7782530542?t=0&luicode=10000011&lfid=100103type%3D1%26q%3D%E6%98%BC%E5%A4%9C%E9%A2%A0%E5%80%92%E7%9C%8B%E6%9C%88%E6%98%9F"
                                   target="_blank">
                                    <i class="iconfont icon-xinlangweibo"></i>
                                </a>
                            </li>
                            <li>
                                <a class="external-link"
                                   href="https://www.xiaohongshu.com/user/profile/6587abda000000001b0334ef?xsec_token=ABpF0qQrtwZe2mreAE6TjpbRb3JVaUgCe_KjBeqPtOaN8%3D&xsec_source=pc_search"
                                   target="_blank">
                                    <i class="iconfont icon-xiaohongshu"></i></a></li>
                            <li>
                                <a class="external-link"
                                   href="https://blog.csdn.net/zanzanzanzan_?ops_request_misc=%7B%22request%5Fid%22%3A%22b465350d8f8a07e17a4e313aab11c0a9%22%2C%22scm%22%3A%2220140713.130064515..%22%7D&request_id=b465350d8f8a07e17a4e313aab11c0a9&biz_id=206&utm_medium=distribute.pc_search_result.none-task-user-null-1-159003356-null-null.nonecase&utm_term=zanzanzanzan_&spm=1018.2226.3001.4351"
                                   target="_blank">
                                    <i class="iconfont icon-csdn"></i></a></li>
                            <li>
                                <button type="button" class=" my-custom-button" title="282307130@QQ.com"
                                        data-container="body" data-toggle="popover" data-placement="right"
                                        data-content="有事请留言">
                                    <i class="iconfont icon-QQyouxiang2"></i>
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="blog-sidebar-widget">
                        <form method="get" action="/">
                            <input type="search" placeholder="查询..." name="query">
                            <button type="submit"><i class="fa fa-search"></i></button>
                        </form>
                    </div>
                    <div class="blog-sidebar-widget">
                        <h3>博客类别</h3>
                        <ul class="blog-categories">
                            <li th:each="categoryShow : ${categoryShowList}"><a th:href="'/category/'+ ${categoryShow.id}" th:text="${categoryShow.categoryName}"></a></li>
                        </ul>
                    </div>
                    <div class="blog-sidebar-widget">
                        <h3>按标签</h3>
                        <ul class="blog-tags">
                            <li th:each="tagShow : ${tagShowList}"><a th:href="'/tag/' + ${tagShow.id}" th:text="${tagShow.tagName}"></a></li>
                        </ul>
                    </div>
                    <div class="blog-sidebar-widget">
                        <h3>热门帖子</h3>
                        <ul class="featured-list">
                            <li class="sidebr-pro-widget" th:each="topHotArticle : ${topHotArticleList}">
                                <div class="blog-thumb-info">
                                    <div class="blog-thumb-info-image">
                                        <a th:href="'/article/'+ ${topHotArticle.id}">
                                            <img th:src="@{'/assets/img/' + ${topHotArticle.image}}" alt="blog"/>
                                        </a>
                                    </div>
                                    <div class="blog-thumb-info-content">
                                        <h4><a th:text="${topHotArticle.title}" th:href="'/article/'+ ${topHotArticle.id}"></a></h4>
                                        <p>发布于 :<a  th:text="${#dates.format(topHotArticle.releaseDate, 'yyyy-MM-dd')}" href="#"></a></p>
                                        <p>发布者 :<a th:text="${topHotArticle.user.userName}" href="#"></a></p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="blog-sidebar-widget">
                        <h3>相册</h3>
                        <ul class="instagram">
                            <li>
                                <a href="#">
                                    <img src="/assets1/img/img-1.jpg" alt="instagram"/>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="/assets1/img/img-2.jpg" alt="instagram"/>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="/assets1/img/img-2.jpg" alt="instagram"/>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="/assets1/img/img-4.jpg" alt="instagram"/>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="/assets1/img/img-5.jpg" alt="instagram"/>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="/assets1/img/img-2.jpg" alt="instagram"/>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="/assets1/img/img-2.jpg" alt="instagram"/>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="/assets1/img/img-1.jpg" alt="instagram"/>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="blog-sidebar-widget">
                        <div class="banner-ads">
                            <a href="#">
                                <img src="/assets1/img/beach-vacation.jpg" alt="banner"/>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!--右侧内容 结束-->
        </div>
    </div>
</section>
<!-- Allpost Area End -->




<!-- jQuery -->
<script src="/assets1/js/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="/assets1/js/bootstrap.min.js"></script>

<!-- Magnific Popup JS -->
<script src="/assets1/js/jquery.magnific-popup.min.js"></script>

<!-- OwlCarousel JS -->
<script src="/assets1/js/owl.carousel.min.js"></script>

<!-- SlickNav JS -->
<script src="/assets1/js/jquery.slicknav.min.js"></script>

<!-- Custom JS -->
<script src="/assets1/js/custom.js"></script>

<script>
    $(function () {
        $("[data-toggle='popover']").popover();
    });


    <!--已有窗口跳转（避免创建多个重复窗口）(抖音，小红书跳转)-->
    const windows = {};  // 用于存储打开的窗口

    $('.external-link').on('click', function(e) {
        e.preventDefault();

        const url = $(this).attr('href');  // 获取链接目标 url
        const name = url.replace(/\W/g, '');  // 移除非字母数字字符用作窗口名称

        // 如果窗口未打开，或者窗口已经被关闭，则重新打开窗口
        if (typeof windows[name] == 'undefined' || windows[name].closed) {
            windows[name] = window.open(url, name);
        } else {
            windows[name].focus();  // 否则，让已打开的窗口获取焦点
        }
    });

    <!--切换分页时保存滚轮位置-->
    function keepScrollPos(url) {
        //存储滚动位置
        const scrollPos = $(window).scrollTop();
        localStorage.setItem('scrollPos', scrollPos);

        // 重定向到点击的页面
        window.location.href = url;
        return false;
    }

    <!--加载页面时，获取滚轮位置-->
    $(document).ready(function() {
        //检索滚动位置
        const scrollPos = localStorage.getItem('scrollPos');
        if (scrollPos) {
            $(window).scrollTop(scrollPos);
            localStorage.removeItem('scrollPos');
        }
    });



</script>
</body>

</html>
